<template>
	<Layout style="height: 100%" class="main">
		<Sider hide-trigger collapsible :width="256" :collapsed-width="64" v-model="collapsed" class="left-sider" :style="{overflow: 'hidden'}">
			<div style="font-size: 18px;color: #fff;padding: 24px 25px;cursor: pointer;" @click="gokRoom">
				库房切换/管理<Icon style="font-size: 28px; margin-left: 12px;" type="ios-cog" />
			</div>
			<side-menu accordion ref="sideMenu" :active-name="$route.name" :collapsed="collapsed" @on-select="turnToPage" :menu-list="menuList">
				<!-- 需要放在菜单上面的内容，如Logo，写在side-menu标签内部，如下 -->
				<!--<div class="logo-con">
					<img v-show="!collapsed" :src="maxLogo" key="max-logo" />
					<img v-show="collapsed" :src="minLogo" key="min-logo" />
				</div>-->
			</side-menu>
		</Sider>
		<Layout>
			<Header class="header-con">
				<header-bar :collapsed="collapsed" @on-coll-change="handleCollapsedChange">
					<user :message-unread-count="unreadCount" :user-avator="userAvator" />
					<span style="color: #B4B8CE;font-size: 16px;margin-right: 20px;">Hi，{{userName}}</span>
					<!--<language v-if="$config.useI18n" @on-lang-change="setLocal" style="margin-right: 10px;" :lang="local"/>-->
					<!--<error-store v-if="$config.plugin['error-store'] && $config.plugin['error-store'].showInHeader" :has-read="hasReadErrorPage" :count="errorCount"></error-store>-->
					<!--<fullscreen v-model="isFullscreen" style="margin-right: 10px;"/>-->
				</header-bar>
			</Header>
			<Content class="main-content-con">
				<Layout class="main-layout-con">
					<div class="tag-nav-wrapper">
						<!--<tags-nav :value="$route" @input="handleClick" :list="tagNavList" @on-close="handleCloseTag" />-->
    					<div class="main-roomname">{{roomname}}</div>
    					<custom-bread-crumb show-icon style="margin-left: 30px;" :list="breadCrumbList"></custom-bread-crumb>
					</div>
					<Content class="content-wrapper">
						<keep-alive :include="cacheList">
							<router-view/>
						</keep-alive>
						<ABackTop :height="100" :bottom="80" :right="50" container=".content-wrapper"></ABackTop>
					</Content>
				</Layout>
			</Content>
		</Layout>
	</Layout>
</template>
<script>import SideMenu from './components/side-menu'
import HeaderBar from './components/header-bar'
import TagsNav from './components/tags-nav'
import User from './components/user'
import ABackTop from './components/a-back-top'
import Fullscreen from './components/fullscreen'
import Language from './components/language'
import ErrorStore from './components/error-store'
import { mapMutations, mapActions, mapGetters } from 'vuex'
import { getNewTagList, routeEqual } from '@/libs/util'
import routers from '@/router/routers'
import minLogo from '@/assets/images/logo-min.jpg'
import maxLogo from '@/assets/images/logo.jpg'
import customBreadCrumb from './components/header-bar/custom-bread-crumb/custom-bread-crumb.vue'
import './main.less'
import Cookies from 'js-cookie';
export default {
	name: 'Main',
	components: {
		SideMenu,
		HeaderBar,
		Language,
		TagsNav,
		Fullscreen,
		ErrorStore,
		User,
		ABackTop,
		customBreadCrumb
	},
	data() {
		return {
			collapsed: false,
			minLogo,
			maxLogo,
			isFullscreen: false,
			userName: '',
			addFlag: false
		}
	},
	created() {
		if(sessionStorage.getItem('master') == 2) {
			this.addFlag = true;
		}
	},
	computed: {
		...mapGetters([
			'errorCount'
		]),
		tagNavList() {
			return this.$store.state.app.tagNavList
		},
		tagRouter() {
			return this.$store.state.app.tagRouter
		},
		userAvator() {
			return this.$store.state.user.avatorImgPath
		},
		cacheList() {
			const list = ['ParentView', ...this.tagNavList.length ? this.tagNavList.filter(item => {
				!(item.meta && item.meta.notCache);
			}).map(item => item.name) : []]
			return list
		},
		menuList() {
			return this.$store.getters.menuList
		},
		local() {
			return this.$store.state.app.local
		},
		hasReadErrorPage() {
			return this.$store.state.app.hasReadErrorPage
		},
		unreadCount() {
			return this.$store.state.user.unreadCount
		},
		breadCrumbList() {
			return this.$store.state.app.breadCrumbList
		},
		roomname() {
			return sessionStorage.getItem('roomname')
		}
	},
	methods: {
		...mapMutations([
			'setBreadCrumb',
			'setTagNavList',
			'addTag',
			'setLocal',
			'setHomeRoute',
			'closeTag'
		]),
		...mapActions([
			'handleLogin',
			'getUnreadMessageCount'
		]),
		turnToPage(route) {
			let {
				name,
				params,
				query
			} = {}
			if(typeof route === 'string') name = route
			else {
				name = route.name
				params = route.params
				query = route.query
			}
			if(name.indexOf('isTurnByHref_') > -1) {
				window.open(name.split('_')[1])
				return
			}
			this.$router.push({
				name,
				params,
				query
			})
		},
		handleCollapsedChange(state) {
			this.collapsed = state
		},
		handleCloseTag(res, type, route) {
			if(type !== 'others') {
				if(type === 'all') {
					this.turnToPage(this.$config.homeName)
				} else {
					if(routeEqual(this.$route, route)) {
						this.closeTag(route)
					}
				}
			}
			this.setTagNavList(res)
		},
		handleClick(item) {
			this.turnToPage(item)
		},
		addTool() {
			this.$router.push({
				name: 'addRoom'
			});
		},
		gokRoom() {
			this.$router.push({
				name: 'kRoom'
			});
		}
	},
	watch: {
		'$route' (newRoute) {
			const {
				name,
				query,
				params,
				meta
			} = newRoute
			this.addTag({
				route: {
					name,
					query,
					params,
					meta
				},
				type: 'push'
			})
			this.setBreadCrumb(newRoute)
			this.setTagNavList(getNewTagList(this.tagNavList, newRoute))
			this.$refs.sideMenu.updateOpenName(newRoute.name)
		}
	},
	mounted() {
		/**
		 * @description 初始化设置面包屑导航和标签导航
		 */
		this.setTagNavList()
		this.setHomeRoute(routers)
		const {
			name,
			params,
			query,
			meta
		} = this.$route
		this.addTag({
			route: {
				name,
				params,
				query,
				meta
			}
		})
		this.setBreadCrumb(this.$route)
		// 设置初始语言
		this.setLocal(this.$i18n.locale)
		// 如果当前打开页面不在标签栏中，跳到homeName页
		if(!this.tagNavList.find(item => item.name === this.$route.name)) {
			this.$router.push({
				name: this.$config.homeName
			})
		}
		// 获取未读消息条数
		this.getUnreadMessageCount()
		this.userName = JSON.parse(Cookies.get('token')).username
	}
}</script>
<style lang="less">.ivu-layout-sider-children {
	display: flex;
	flex-direction: column;
}

.main .tag-nav-wrapper {
	display: block;
	height: auto;
}
.main-roomname {
	margin-left: 30px;
    font-size: 20px;
    font-weight: bold;
    padding: 10px 0;
}
.addRoom {
	font-size: 20px;
	color: #FFFFFF;
	text-align: center;
	padding: 28px 0;
	background: #0052D9;
	line-height: 1;
	cursor: pointer;
}</style>